<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="售后" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		<view class="goods-bg">
			<view class="goods-item">
				<view style="width: 30%;">
					<image :src="orderInfo.sku.sku_img_url" class="card_img"></image>
				</view>
				
				<view class="med_right">
					<view class="font16">{{orderInfo.goods.name ? orderInfo.goods.name : orderInfo.goods_name}}</view>
					<view class="font12 text-hind" style="margin-top: 15rpx;">{{orderInfo.sku.sku_name}}</view>
					<view class="flex-row items-center" style="margin-top: 15rpx;">
						<view style="color: #5c8edc;font-size: 30rpx;margin-right: 20rpx;">¥{{orderInfo.order_price}}</view>
						<view class="font12 text-hind">x{{orderInfo.order_number}}</view>
					</view>
					
				</view>
			</view>
		</view>
		
		
		<view class="after-body">
			<view @click="typePop" class="flex-row justify-between items-center" style="height: 80rpx;">
				<text>申请类型</text>
				<view class="flex-row items-center" style="gap: 10rpx;">
					<text>{{afterType ? afterType : '请选择类型'}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="line"></view>
			<view @click="reasonPop" class="flex-row justify-between items-center" style="height: 80rpx;margin-top: 15rpx;">
				<text>申请原因</text>
				<view class="flex-row items-center" style="gap: 10rpx;">
					<text>{{afterReason ? afterReason : '请选择原因'}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			
			
			<view class="input-set">
				<u--textarea height="170" v-model="value" placeholder="其他想说的..."></u--textarea>
			</view>
			
			<view style="margin: 15rpx;">
				<u-upload
				    :fileList="fileList1"
				    @afterRead="afterRead"
				    @delete="deletePic"
				    name="1"
				    multiple
				    :maxCount="1"
				  ></u-upload>
			</view>
		</view>
		
		<view class="bottom-lay">
			<u-button type="success" shape="circle" text="确定" @click="handleConfirm"></u-button>
		</view>
		
		
		
		
		
		
		
		
		<u-action-sheet @close="close1" :closeOnClickOverlay="true" :closeOnClickAction="true" :actions="list1" @select="selectClick1" title="请选择类型" :show="typeShow"></u-action-sheet>
		<u-action-sheet @close="close2" :closeOnClickOverlay="true" :closeOnClickAction="true" :actions="list2" @select="selectClick2" title="请选择原因" :show="reasonShow"></u-action-sheet>
	</view>
</template>

<script>
	import api from '@/common/api.js'
	export default {
		data() {
			return {
				orderInfo:{},
				afterType:'',
				afterTypeId:'',
				afterReason:'',
				value:'',
				fileList1: [],
				net_img:'',
				typeShow:false,
				reasonShow:false,
				list1:[
					{
						id: '5',
						name: '仅退款'
					},
					{	
						id: '1',
						name:'退货退款'
					},
					{
						id: '3',
						name: '维修'
					},
					{
						id: '4',
						name: '其它'
					}
				],
				list2:[
					{
						name:'不想要了'
					},
					{
						name: '质量问题'
					},
					{
						name: '商家发错货'
					},
					{
						name: '收到商品少件（含少配件）'
					},
					{
						name: '商品破损或污渍'
					},
					{
						name: '其它'
					}
				]
			};
		},
		onLoad(op) {
			// 申请类型：1、退货退款，2、换货，3、维修，4、其它，5，仅退款
			this.orderInfo = JSON.parse(decodeURIComponent(op.order));
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		methods:{
			typePop(){
				this.typeShow = true;
			},
			reasonPop(){
				this.reasonShow = true;
			},
			close2(){
				this.reasonShow = false;
			},
			close1(){
				this.typeShow = false;
			},
			selectClick1(index){
				console.log(index['id'])
				this.afterType = index['name']
				this.afterTypeId = index['id']
			},
			selectClick2(index){
				this.afterReason = index['name']
			},
			
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.net_img = '';
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
				  this[`fileList${event.name}`].push({
					...item,
					status: "uploading",
					message: "上传中",
				  });
				});
				for (let i = 0; i < lists.length; i++) {
				  const result = await this.uploadFilePromise(lists[i].url);
				  let item = this[`fileList${event.name}`][fileListLen];
				  this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
					  status: "success",
					  message: "",
					  url: result,
					})
				  );
				  fileListLen++;
				}
		    },
			uploadFilePromise(url) {
				let token = this.$store.state.token;
				let that = this;
				return new Promise((resolve, reject) => {
				  let a = uni.uploadFile({
					url: api.IMG_URL,
					filePath: url,
					name: "file",
					header:{
						Apitoken : token,
					},
					formData:{
						'type' : 3
					},
					success: (res) => {
					  let json = JSON.parse(res.data);
					  that.net_img = json.data.img_url;
					  setTimeout(() => {
					   resolve(res.data.img_url);
					  }, 1000);
					},
				  });
				});
			},
			
			handleConfirm(){
				if(this.value == ''){
					this.$u.toast('请输入售后详情')
					return;
				}
				this.$request({
					url:'?c=Aftersales&a=applyAftersales',
					type:'post',
					data:{
						order_id:this.orderInfo.order_id,
						aftersale_type:this.afterTypeId,
						pics:this.net_img,
						description:this.value,
						aftersale_reason:this.afterReason
					}
				}).then(res =>{
					this.$u.toast(res.data||'提交成功')
					setTimeout(()=>{
						uni.navigateBack();
					},1000);
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
}
.goods-bg{
	background-color: #fff;
	padding: 20rpx;
}
.goods-item{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 15rpx;
	padding: 15rpx 20rpx;
}
.card_img {
	height: 180rpx;
	width: 180rpx;
	border-radius: 10rpx;
}
.med_right {
	// height: 180rpx;
	margin-left: 20rpx;
	width: 70%;
	
}
.text-hind {
	color: #909090;
	// margin-top: 15rpx;
}
.font12{
	font-size: 25rpx;
}
.font16{
	font-size: 30rpx;
}
.after-body{
	background-color: #fff;
	margin-top: 12rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	border-top-right-radius: 10rpx;
	border-top-left-radius: 10rpx;
}
.line{
	border: 1px solid #f5f5f5;
	margin-top: 25rpx;
}
.input-set{
	margin: 20rpx;
}
.bottom-lay{
	position: fixed;
	left: 0;
	bottom: 0;
	height: 100rpx;
	width: 100%;
	padding-left: 40rpx;
	padding-right: 40rpx;
	text-align: center;
	background-color: #fff;
	align-items: center;
}
</style>
